<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery的使用</title>
		<!---导入本地的外部jquery库文件--->
		<!--<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>-->
		<!--可以使用cdn静态资源直接引入，但是要求必须接入互联网才能使用        -->
		<script  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
		<script type="text/javascript">
			/*
			 * jquery对象和dom对象：
			 *    因为jquery框架有自己的一套对象系统；jquery在进行dom操作时会将dom对象转换为自己的jquery对象；
			 *    jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
			 *    所以jquery获取的控件和dom方式获取的控件对象不是等价的；
			 *    jquery对象是对dom对象的一种包装，二者之间需要进行转换；
			 *    在编程时，注意jquery对象不能调用dom的方法，dom对象不能调用jquery的方法；
			 *    如果想要调用对方的方法，则需要进行转换之后才能调用；
			 *    
			 *    编程约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
			 *          var $variable = jQuery 对象
			 *          var variable = DOM 对象
			 * 
			 *    需要注意jquery对象和dom对象之间的转换：
			 *    1、dom对象转换为jquery对象
			 *      $(dom对象) 可以转换为 jquery对象；
			 *    2、jquery对象转换为dom对象
			 *      一般jquery获取的对象都是数组结构的；
			 *      通过  jquery对象[index] 或者 jquery对象.get(index) 来进行转换，（下标从0开始）
			 * 
			 * 
			 */
			
			function doClick(){
				alert("你刚才点击了按钮！");
			}
			// 使用jquery给按钮绑定一个点击事件
			// 直接执行jquery代码
			// dom对象加载完成时执行js代码
			$(document).ready(function () {
				// js代码
			});
			// 简写为
			$(function(){
				$("#btnClick2")[0].bind("click",function(){
					alert("你刚才点击了按钮2！");
				});
			});
		</script>
	</head>
	<body>
	     <input type="button" name="btnClick" id="btnClick" value="点击" onclick="doClick();" />
	     <input type="button" name="btnClick2" id="btnClick2" value="jquery点击" />
	</body>
</html>
